<template>
    <van-nav-bar :title="route.meta.title" left-arrow @click-left="router.back()" fixed placeholder></van-nav-bar>
    <van-tabs v-model:active="activeName" @change="changeTab">
        <van-tab title="商品" name="1">
            <div class="wrapper">
                <ArticleList class="list" :apifn="getCollectListByType" :params="{ type: 1, page: 1, limit: 10 }" />
            </div>
        </van-tab>
        <van-tab title="文章" name="2">
            <div class="wrapper">
                <ArticleList class="list" :apifn="getCollectListByType" :params="{ type: 2, page: 1, limit: 10 }" />
            </div>
        </van-tab>
    </van-tabs>
    <van-back-top right="20px" bottom="60px" />
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref } from 'vue'
import { getCollection } from '@/api/collection'
const router = useRouter()
const route = useRoute()
let activeName = ref( sessionStorage.getItem('activeName') || '1')

let changeTab=(name)=>{
    //标签状态持久化
    sessionStorage.setItem('activeName',name)
}

const getCollectListByType = async params => {
    const res = await getCollection(params);
    if (params.type == 1) {
        const dataList = res.data.list;
        res.data.list = dataList?.map(item => {
            return {
                title: item.goods.name,
                desc: (item.goods.price - 0).toFixed(2),
                pic_url: item.goods.picUrl,
                id: item.object_id,
            }
        })
        return res;
    }
    const dataList = res.data.list;
    res.data.list = dataList
        ?.map(item => ({
            ...item,
            title: item.article.title,
            desc: item.article.desc,
            pic_url: item.article.picUrl,
            id: item.object_id,
        }))
        .reverse();
    return res;
}


</script>

<style lang="scss" scoped>
.wrapper {
    padding: 0.26667rem 0.26667rem 0;
}
</style>